<template>
	<view class="container">
		<!-- 列表内容 -->
		<view class="list" v-if="list.length">
			<view @click="go(item)" v-for="(item, index) in list" :key="index" class="item">
				<view class="row title">
					<view class="item-text-overflow">{{item.remark}}</view>
				</view>
				<view class="row">
					<view class="row-left">
						<text class="name">{{item.userName}}</text>
						<text class="time">{{formatDateTime(item.applyTime)}}</text>
					</view>
					<view>
						<uni-tag :text="getApproveStatus(item.status).label" :class="['status_' + item.status]"
							:type="getApproveStatus(item.status).type" size="default" />

					</view>
				</view>
			</view>
		</view>
		<noData v-else></noData>
	</view>
</template>

<script>
	import {
		repairList
	} from '@/api/system/user.js'
	import noData from '@/pages/common/noData/index.vue'
	export default {
		components: {noData},
		data() {
			return {
				approveStatusList: [{
						label: '待检修',
						value: 0,
						type: 'default'
					},
					{
						label: '已检修',
						value: 1,
						type: 'primary'
					},
					{
						label: '审核通过',
						value: 1,
						type: 'success'
					},
					{
						label: '已驳回',
						value: 2,
						type: 'danger'
					},
					{
						label: '已作废',
						value: 3,
						type: 'default'
					},
				],

				list: []
			};
		},
		onLoad() {
			this.fetchData();
		},
		methods: {
			// 初始加载数据
			fetchData() {
				repairList()
					.then(data => {
						this.list = data.rows || []
					})
			},
			go(item) {
				this.$tab.navigateTo(item.status == 0 ? '/pages/repair/workerReportRepairList/submit?id=' + item.id : '/pages/repair/workerReportRepairList/detail?id=' + item.id)
			},
			getApproveStatus(status) {
				return this.approveStatusList.filter(c => c.value == status)[0] || {};
			},
			formatDateTime(dateTimeStr, formatStr = 'YYYY-MM-DD') {
				if(!dateTimeStr) return '';
				
				// 将时间字符串转换为Date对象
				const dateTime = new Date(dateTimeStr);

				// 获取年、月、日、时、分、秒
				const year = dateTime.getFullYear();
				const month = dateTime.getMonth() + 1; // 月份从0开始
				const day = dateTime.getDate();
				const hour = dateTime.getHours();
				const minute = dateTime.getMinutes();
				const second = dateTime.getSeconds();

				// 根据格式字符串格式化日期和时间
				return formatStr
					.replace('YYYY', year)
					.replace('MM', month.toString().padStart(2, '0'))
					.replace('DD', day.toString().padStart(2, '0'))
					.replace('HH', hour.toString().padStart(2, '0'))
					.replace('mm', minute.toString().padStart(2, '0'))
					.replace('ss', second.toString().padStart(2, '0'));
			}
		},
	};
</script>

<style scoped lang="scss">
	.container {
		height: 100%;
		overflow: auto;
		background-color: #fff;
		.list {
			padding: 20rpx;

			/* 列表样式 */
			.item {
				/* 列表项样式 */
				// border-bottom: 1rpx solid #ccc;
				margin-bottom: 30rpx;
				border-radius: 15rpx;
				background-color: #fff;
				padding: 20rpx 25rpx;
				box-shadow: 2rpx 2rpx 4rpx 0 #cccccc80;

				.row {
					margin-bottom: 15rpx;
					display: flex;
					justify-content: space-between;
					&-left {
						color: #999;
						.name {
							padding-right: 10rpx;
						}
					}
				}

				.title {
					display: flex;
					justify-content: space-between;
				}

				.status {
					margin-top: 25rpx;

					&_1 {
						color: red;
					}
				}
			}
		}
	}
</style>